<template>
  <div>
    <div style="text-align: left; margin-left: 100px">
      <el-tag>基本信息：</el-tag><br /><br />
      考试名称：<el-input
        v-model="examDate.examEname"
        style="width: 300px"
        placeholder="请输入内容"
      ></el-input
      >&nbsp;&nbsp; 考试时间：

      <el-date-picker
        v-model="examDate.examTime"
        style="width: 300px"
        type="datetime"
        placeholder="选择日期"
      >
      </el-date-picker>

      <br /><br />
      答题时间：<el-input
        v-model="examDate.examAnserTime"
        style="width: 300px"
        placeholder="答题时间（分钟）"
      ></el-input
      >&nbsp;&nbsp; 参加限制：<el-input
        v-model="examDate.examLimit"
        style="width: 300px"
        placeholder="多少分钟后不能参加考试"
      ></el-input
      ><br /><br />
      考试说明：<el-input
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 4 }"
        placeholder="请输入内容"
        v-model="examDate.examExplain"
        style="width: 700px"
      >
      </el-input>
    </div>
    <br /><br />
    <div style="text-align: left; margin-left: 100px">
      <el-tag>试卷信息：</el-tag><br /><br />
      选择试卷：
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.name"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>

      &nbsp;&nbsp; 及格分数：<el-input
        v-model="examDate.passscore"
        style="width: 300px"
        placeholder="请输入内容"
      ></el-input
      ><br /><br /><br /><br />
    </div>

    <div style="text-align: left; margin-left: 100px" v-if="showExamniee">
      <el-tag>考生信息：</el-tag>&nbsp;&nbsp;&nbsp;&nbsp;
      <el-button type="primary" @click="addExamniee(examDate.examineeInformations)">添加</el-button>
      <!-- <el-button type="primary" plain>删除</el-button> -->
      <br /><br />

      <!-- 显示框 -->
      <div>
        <el-dialog
          title="请选择考生"
          :visible.sync="dialogVisible"
          width="40%"
          :before-close="handleClose"
        >
          <el-table
            ref="multipleTable"
            :data="tableData1"
            height="250"
            border
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="name" label="考生姓名" width="180">
            </el-table-column>
            <el-table-column prop="sex" label="性别" width="180">
            </el-table-column>
            <el-table-column prop="idNumber" label="证件号"> </el-table-column>
          </el-table>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addExamnieeOk()">确 定</el-button>
          </span>
        </el-dialog>
      </div>
      <template>
        <el-table
          :data="examDate.examineeInformations"
          border
          style="width: 920px"
          @selection-change="handleSelectionChange1"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="id" label="序号" width="80"> </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="idNumber" label="证件号" width="180">
          </el-table-column>
          <el-table-column prop="sex" label="性别" width="100">
          </el-table-column>
          <el-table-column prop="telephone" label="联系电话" width="200">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120" v-if="showButton">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="
                  deleteRow(scope.$index, examDate.examineeInformations)
                "
                type="text"
                size="small"
              >
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <br />
    <div style="text-align: left; margin-left: 400px">
      <el-row>
        <el-button plain @click="cancel">取消</el-button
        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-button
          type="primary"
          plain
          @click="saveExam"
          v-text="saveOrUpdate"
          v-if="showButton"
          >保存</el-button
        >
      </el-row>
    </div>
    <br />
  </div>
</template>
<script>
export default {
  data() {
    return {
      showButton: true,
      showExamniee: true,
      options: [
        {
          id: "",
          name: "",
        },
      ],
      saveOrUpdate: "",
      value: "",
      dialogVisible: false,
      input: "",
      textarea2: "",
      examDate: {
        examEname: "",
        examTime: "",
        examAnserTime: "",
        examExplain: "",
        examPaper: "",
        examLimit: "",
        passscore: "",
        examineeInformations: [],
        tableData: [],
      },
      multipleSelection: [],
      multipleSelection1: [],
      tableData1: [
        {
          id: "",
          name: "",
          sex: "",
          idNumber: "",
        },
      ],
      addExamnieeCode:0,//控制添加考生是否已经访问过后端
    };
  },
  //钩子函数 在组件第一次渲染的时候才执行
  created() {
    console.log("sss", this.$route.params.s);
    if (this.$route.params.type == 2) {
      this.showButton = true;
      this.showExamniee = false;
      this.saveOrUpdate = "修改";
      this.examDate = this.$route.params.s;
      this.value = this.$route.params.s.examPaper;
    } else if (this.$route.params.type == 1) {
      this.showButton = true;
      this.showExamniee = true;
      this.saveOrUpdate = "保存";
    } else if (this.$route.params.type == 3) {
      this.showExamniee = true;
      this.showButton = false;
      this.showStu();
      this.examDate = this.$route.params.s;
      this.value = this.$route.params.s.examPaper;
    }

    this.findPaperCategory();
  },
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    //查看详情时  查询学生显示出来
    showStu(){
        let id=this.$route.params.s.id;
        this.$axios
        .get("api/exam/findExamineeByEid/"+id)
        .then((res) => {
        //   console.log("leibie:" ,res);
          if (res.data.code == 200) {
            this.examDate.examineeInformations = res.data.data;
            // console.log(this.options);
          } else {
          }
        })
        .catch();
    },
    //显示试卷
    findPaperCategory() {
      this.$axios
        .get("api/exam/findPaperAtt")
        .then((res) => {
          console.log("leibie:" + res);
          if (res.data.code == 200) {
            this.options = res.data.data;
            console.log(this.options);
          } else {
          }
        })
        .catch();
    },

    //取消保存 返回界面
    cancel() {
      this.$router.push({ path: "/examDescription" });
    },
    toggleSelection(rows) {
        console.log("rows是",rows);
        if (rows) {
          // console.log("if");
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row,true);
            console.log(row);
          });
        } else {
          console.log("else");
          this.$refs.multipleTable.clearSelection();
        }
      },
    addExamniee(rows) {
      // console.log("acf",rows);
      // this.toggleSelection(rows);
      //显示窗口
      
      if (this.addExamnieeCode==1) {
        this.dialogVisible = true;
      } else {
        this.addExamnieeCode=1;
        this.dialogVisible = true;
        this.$axios
        .get("api/exam/findAllExamineeInfo")
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.tableData1 = res.data.data;
            console.log("acf",rows);
            this.toggleSelection(rows);
          }
        })
        .catch();
      }
      
    },
    //确认添加考生
    addExamnieeOk() {
      this.dialogVisible = false;
      console.log(this.multipleSelection);
    },
    //确认添加试卷
    saveExam() {
      if (this.$route.params.type == 1) {
        this.examDate.examPaper = this.value;
        // console.log(this.examDate.examPaper);
        // console.log("time",this.examDate.examTime);
        this.$axios
          .post("api/exam/addExam", this.examDate)
          .then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              this.$router.push({ path: "/examDescription" });
              this.$message({
                message: res.data.message,
                type: "success",
              });
            } else {
              this.$message({
                message: res.data.message,
                type: "error",
              });
            }
          })
          .catch();
      } else if (this.$route.params.type == 2) {
        this.examDate.examPaper = this.value;
        // this.examDate.examTime="";
        // console.log(this.examDate.examPaper);
        this.$axios
          .put("api/exam/deleteExam", this.examDate)
          .then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              this.$router.push({ path: "/examDescription" });
              this.$message({
                message: res.data.message,
                type: "success",
              });
            } else {
              this.$message({
                message: res.data.message,
                type: "error",
              });
            }
          })
          .catch();
      }
    },

    handleSelectionChange(val) {
      // this.toggleSelection(val);
      this.examDate.examineeInformations = val;

    },

    handleSelectionChange1(val) {
      this.multipleSelection1 = val;
    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>